.myhome {
  width: 100%;

  // 顶部栏
  .myhome-header {
    $controlHeight: 150px;

    padding: 20px 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;

    // 头像区
    .myhome-avatar {
      width: $controlHeight;
      height: $controlHeight;
      margin-right: 30px;

      .myhome-avatar-img {
        border: 1px solid #999;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-size: cover;
      }
    }

    // 个人信息区
    .myhome-user {
      flex: 1;

      .myhome-user-info {
        display: flex;
        align-items: center;
        padding: 6px 0;

        span {
          margin-right: 10px;
        }

        .nickname {
          font-weight: bold;
        }

        .level {
          border-radius: 2px;
          background-color: #4CC3FF;
          color: white;
          font-size: 12px;
          padding: 1px 4px 1px;
          user-select: none;
        }

        .id {
          color: #CCC;
          font-size: 12px;
        }
      }

      .myhome-user-intro {
        padding: 0px 0px 10px;

        .content {
          color: #999;
        }
      }

      .myhome-user-edit {
        button {
          outline: none;
          border: 1px solid #00C3FF;
          border-radius: 4px;
          background-color: transparent;
          color: #00C3FF;
          font-size: 14px;
          padding: 6px 28px;
          cursor: pointer;
          user-select: none;
          transition: 0.2s background-color, 0.2s color;

          &:hover {
            background-color: #00C3FF;
            color: white;
          }
        }
      }
    }

    // 个人数据区
    .myhome-data {
      width: 300px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      margin-left: 30px;

      .unit {
        &:not(:last-child) {
          border-right: 1px solid #F0F0F0;
        }

        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .value {
          color: #333;
          font-size: 20px;
        }

        .key {
          color: #CCC;
          font-size: 14px;
        }
      }
    }
  }

  // 下部
  .myhome-main {
    width: 100%;
    display: flex;

    // 侧边栏
    .myhome-sidebar {
      width: 240px;
      margin-right: 20px;

      .myhome-side-inner {
        .oper-list {
          padding: 0 50px 10px;

          .oper-unit {
            display: block;
            height: 50px;
            font-size: 14px;
            display: flex;
            align-items: center;
            cursor: pointer;

            .oper-icon {
              width: 22px;
              height: 22px;
              color: #666;
              text-align: center;
              margin-right: 15px;

              &.hover {
                color: #00C3FF;
              }
            }

            .oper-type {
              flex: 1;
              color: #666;

              &.hover {
                color: #00C3FF;
              }
            }
          }
        }
      }
    }

    // 主内容
    .myhome-mainbar {
      .myhome-main-inner {
        font-size: 14px;
      }
    }
  }
}
